<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 通过服务器运行当前html文件 可以显示网络来源图片 -->
  <meta name="referrer" content="never">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <style>
    .num{
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000;
    }

    .jian{
      position: absolute;
      top:0;
      left: 82px;
    }

    .jia{
      position: absolute;
      top:38px;
      left: 82px;
    }
  </style>
</head>
<body>
<h1>我是一个商品详情页面</h1>

<div class="container"></div>

<script src="../tools/jquery.min.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/cookie.js"></script>

<script>
  // 提前定义一个变量 存储 数据
  let goods_msg = {};

  // 执行函数获取url地址栏数据 发送请 动态渲染生成页面
  setPage();

  // 页面内容是 异步程序 动态生成的 通过 事件委托 点击 加入购物车事件

  // jQuery语法添加点击事件 js语法的事件委托
  // $('.container').click(function(e){
  //   if( e.target.getAttribute('name') === 'cart' ){
  //     console.log(111);
  //   }
  // })
  
  // jQuery语法的事件委托  点击的是 加入 购物车 
  $('.container').on( 'click' , '[name="cart"]' , function(){
    // 1, 获取 cookie的键值对
    const cookieObj = myGetCookie();
    
    // 2, 判断 如果 cookieObj.login 是 undefined 证明没有登录
    if( cookieObj.login === undefined ){
      if( window.confirm('您还没有登录,点击确定,跳转登录页面') ){
        // 跳转登录页面 携带 当前页面的 url地址栏的所有数据信息
        // window.location.href 存储 地址栏的所有数据信息
        window.location.href = `./login.html?${window.location.href}`;
      }
    
    }else{
      // 如果已经登录 向 localStorage 中 存储商品信息

      // 1, goods_msg 中 存储 了 当前商品信息
      // 获取本地 localStorage 中 cart 购物车信息
      // 如果没有 cart购物车信息 获取结果是 null 
      let cart = window.localStorage.getItem('cart');
      
      // 判断 如果 获取 cart 购物车 信息是 null
      if( cart === null ){
        // 证明没有 创建 购物车 键值对信息 
        // 在 localStorage 中 创建 键名 cart 键值是 当前商品信息 存储在 数组中

        // 需要 添加 两个属性 是否购买 购买数量
        // 购买状态 默认为 true
        // 购买数量 是 input输入框 输入的数据
        goods_msg.buy = true;
        goods_msg.num = $('[name="num"]').val() - 0;
        console.log( goods_msg );

        // 将 商品信息 存储到数组中 转化为 json字符串
        // 将 json字符串 存储到 cart 键名中
        window.localStorage.setItem('cart' , JSON.stringify( [goods_msg] ) );
      
      }else{
        // 有 cart 数据信息
        // 将 json字符串 还原为对应的数据结构
        cart = JSON.parse( cart );

        // 已经创建了 购车信息 
        if( cart.length === 0 ){
          // cart 数据信息 是一个 空数组 证明没有任何商品
          // 需要 添加 两个属性 是否购买 购买数量
          // 购买状态 默认为 true
          // 购买数量 是 input输入框 输入的数据
          goods_msg.buy = true;
          goods_msg.num = $('[name="num"]').val() - 0;
          console.log( goods_msg );
          
          // 将商品信息写入 数组的起始位置
          // 商品信息是 json字符串形式
          cart.unshift( JSON.stringify( goods_msg ) );
          // 将新的数组信息 设定到 localStorage 中
          window.localStorage.setItem('cart' , JSON.stringify( cart ) );

        }else{
          // 已经有了商品信息 
          // 需要判断 当前商品 是不是 已经在 商品信息中
          // 思路1: 
          // 提前定义一个变量 存储默认值
          // 循环遍历所有商品
          // 如果 有 已经存储的商品的goods_id 和 当前商品的goods_id 相同
          // 给 变量 赋值 其他数值 终止循环
          // 思路2:
          // 数组.some() 函数
          // 如果有一个符合条件的数据 返回值就是 true
          // 使用 当前商品的goods_id 和 已经存在的商品的goods_id 判断 
          // 如果 结果是 true  证明商品已经存在 
          // 如果 结果是 false 证明商品不存在
          let bool = cart.some(function(val){
            return val.goods_id === goods_msg.goods_id;
          })
          // console.log(bool);

          if( bool ){
            // 结果是 true 证明商品已经存在
            // 找到 goods_id 相同的商品 购买数据累加 input输入框中的数量
            // 将 新的结果 设定到 localStorage 中
            for( let i = 0 ; i <= cart.length-1 ; i++ ){
              if( cart[i].goods_id === goods_msg.goods_id ){
                // 已经存储的商品信息 购买数量累加 input输入框输入的数据 
                // 输入的购买数量 和 原始的购买数量 累加 不能 超过 库存值
                cart[i].num = cart[i].num + ($('[name="num"]').val() - 0 ) > goods_msg.goods_number ? goods_msg.goods_number : cart[i].num + ($('[name="num"]').val() - 0 );
                // 终止循环
                break;
              }
            }
            // 循环结束 商品信息数组中 已经添加了购买数量
            // 设定给 localStorage
            window.localStorage.setItem( 'cart' , JSON.stringify( cart ) );

          }else{
            // 当前商品信息 不存在 已经 存储的商品中
            // 设定当前商品信息 存储到 数组的起始位置
            // 将新的数据 设定给 localStorage
            // 需要 添加 两个属性 是否购买 购买数量
            // 购买状态 默认为 true
            // 购买数量 是 input输入框 输入的数据
            goods_msg.buy = true;
            goods_msg.num = $('[name="num"]').val() - 0 ;
            // 将 当前商品信息 写入到数组的起始位置
            cart.unshift( goods_msg );
            // 将新的数组设定给 localStorage
            window.localStorage.setItem( 'cart' , JSON.stringify( cart ) );

          } 



        }
      }

      // 设定好 购物车数据 可以 跳转 购物车页面
      window.location.href = './cart.html';
    }
  })

  // jQuery语法获取标签对象 使用js的语法完成事件委托
  $('.container').click(function(e){
    if(e.target.getAttribute('name') === '-'){
      //  点击 减 的操作
      //  获取原始数值 累减1 再 赋值给input标签本本身
      //  最小值是 1 
      $('[name="num"]').val( $('[name="num"]').val()-0-1 < 1 ? 1 : $('[name="num"]').val()-0-1 );


    }else if( e.target.getAttribute('name') === '+' ){
      //  点击 加 的操作 
      //  获取原始数值 累加1 在 赋值给input标签
      //  $('[name="num"]').val() 获取 input标签中输入的数据
      //  $('[name="num"]').val() 获取的数据是字符串格式 需要-0 自动转化为数值类型 
      //  转化为数值类型 再 累加 1
      //  如果 超过 库存数值 就 赋值 库存数值 
      //  没有 超过 库存数值 就 赋值 计算的数值本身
      $('[name="num"]').val( $('[name="num"]').val()-0+1 > goods_msg.goods_number-0 ? goods_msg.goods_number-0 : $('[name="num"]').val()-0+1 );
    }


    
  })

  // 通过事件委托 给 input标签添加失去焦点事件
  // input标签添加失去焦点判断
  $('.container').on('blur' , '[name="num"]' , function(){
    // 如果数值 小于 1 赋值 1
    if( $('[name="num"]').val()-0 < 1 ){
      window.alert('最小是不能小于1');
      $('[name="num"]').val(1);

    // 如果数值 大于 库存 赋值 库存
    }else if( $('[name="num"]').val()-0 > goods_msg.goods_number-0 ){
      window.alert('最大值不能大于库存数值');
      $('[name="num"]').val( goods_msg.goods_number-0 );
    }
  })

  async function setPage(){
    // 1,获取浏览器地址栏数据
    const urlObj = myGetUrlVal();
    console.log( urlObj );

    // 2,发送请求
    const res = await myPromiseAjax( '../server/goods_detail.php' , 'post' , {goods_id:urlObj.goods_id} , 'json' );
    console.log(res);
    // 使用 全局变量 存储 商品信息
    goods_msg = res;

    // 3,动态生成页面
    let str = `
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">商品详细信息</h3>
      </div>
      <div class="panel-body">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="${res.goods_small_logo}" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">${res.goods_name}</h4>
            <p>
              <i class="glyphicon glyphicon-yen"></i>
              <span>${res.goods_price}</span>
            </p>
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default">XL</button>
              <button type="button" class="btn btn-default">L</button>
              <button type="button" class="btn btn-default">M</button>
              <button type="button" class="btn btn-default">S</button>
              <button type="button" class="btn btn-default">XS</button>
            </div>
            <p style="position:relative">
              <input value="1" name="num" class="num">
              <button type="button" name="-" class="jian btn btn-default">-</button>
              <button type="button" name="+" class="jia btn btn-default">+</button>
            </p>
            <p>
              <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
              <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
            </p>
          </div>
        </div>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
          <li role="presentation"><a href="#">商品参数信息</a></li>
          <li role="presentation"><a href="#">相关商品</a></li>
        </ul>
        <div>
            ${res.goods_introduce}
        </div>
      </div>
    </div>
    `;
    // 写入字符串
    $('.container').html(str);
  }

</script>



<script>
  /*
    1,  获取 url地址栏中 goods_id 数据
        根据数据 想 服务器发送请求 获取数据结果
        根据数据结果 动态生成页面

        请求地址: '../server/goods_detail.php'
        请求方式: post
        携带参数: 1个参数 键名是 goods_id
        响应体格式: json字符串

    2,  点击购物车
      (1) 判断 有没有登录
        如果 没有 登录 点击确定 跳转登录页面
          登录之后要 5秒 默认返回上一个页面 点击 返回首页面
            方法1:
              历史记录 
                window.history.back()
                window.history.go(-1)

            方法2:
              跳转 登录页 携带 url地址栏数据
              登录页 获取 url地址栏数据 
              跳转时 设定 url地址栏数据信息

      (2) 如果登录 需要 将购车商品信息条件 跳转购车页面
        localStorage 来 存储 购物车信息
        存储 当前商品的所有商品信息

        情况1: 没有 cart 这个键值对 也就是完全没有购物车
          获取 当前商品信息 
          添加 buy 和 num 两个属性
          给 localStorage 中 添加 cart 属性 
          属性值 是 数组存储当前商品信息 转化的json字符串

        情况2: 有 cart 这个键值对象
          a: cart 这个数组 是 空数组
            获取 当前商品信息 
            添加 buy 和 num 两个属性
            向数组新增当前商品信息单元
            给 localStorage 中 添加 cart 属性 
            属性值 是 cart 这个数组 转化的json字符串

          b: cart 这个数组 不是 空数组
            判断 cart 数组中 存储的商品 有没有 当前商品
              如果有 商品购买数量 
                累加 input输入的数量  数值不能超过 库存值
                给 localStorage 中 重新设定 cart 属性 
                属性值 是 cart 这个数组 转化的json字符串 

              如果没有这个商品
                获取 当前商品信息 
                添加 buy 和 num 两个属性
                向数组新增当前商品信息单元
                给 localStorage 中 重新设定 cart 属性 
                属性值 是 cart 这个数组 转化的json字符串  
        
      (3) - 和 +
        减号 数值 不能小于 1 
        加号 数值 不能超过 库存
        
        所有的购买数量 都要 在 1 和 库存之间

  */
</script>

</body>
</html>
